<!--
 * @Author: weidewei
 * @Date: 2025-11-17 09:33:49
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-17 11:49:50
 * @Description: 
 * @FilePath: \2025-front-face\review-knowledge\20251117\复习数组转树.html
-->
<script>
  let list = [
    {
      id: 1,
      name: "广东省",
      pid: null,
    },
    {
      id: 2,
      name: "深圳市",
      pid: 1,
    },
    {
      id: 3,
      name: "南山区",
      pid: 2,
    },
    {
      id: 4,
      name: "中山市",
      pid: 1,
    },
    {
      id: 5,
      name: "山东省",
      pid: null,
    },
    {
      id: 6,
      name: "青岛市",
      pid: 5,
    },
  ];

  // 递归数组转树法
    function arrToTree(arr, parentId=null) {
      const result = arr.filter((item) => item.pid === parentId);
      return result.map((item) => {
        return {
          id: item.id,
          name: item.name,
          children: arrToTree(arr,item.id),
        };
      });
    }

    console.log(arrToTree(list, null));

  /* 
    循环+Map法
    1.收集阶段：把所有的节点存入Map
    2.连接：根据parentId建立父子关系
  */
  // function arrToTreeMap(arr) {
  //   const map = new Map();
  //   const roots = [];
  //   for (const item of arr) {
  //      map.set(item.id,{...item,children: []});     
  //   }
  //   for (const item of arr) {
  //     const node = map.get(item.id);
  //     const parentId = item.pid;
  //     if(parentId === null){
  //       roots.push(node);
  //     }else {
  //       const parent = map.get(parentId);
  //       if(parent) {
  //           parent.children.push(node);
  //       }
  //     }  
  //   }
  //   return roots;
  // }
  // console.log(arrToTreeMap(list));
  
  // reduce方法
  // function arrToTreeReduce(arr) {
  //   const map = new Map();
  //   return arr.reduce((roots,item)=>{
  //     const node = {...item,children: []};
  //     map.set(item.id,node);
  //     if(item.pid === null) {
  //       roots.push(node);
  //     }else {
  //       const parent = map.get(item.pid);
  //       if(parent) {
  //         parent.children.push(node);
  //       }else {
  //         roots.push(node);
  //       }
  //     }
  //     return roots;
  //   },[])
  // }

  // 普通for循环
  // function arrToTreeFor(arr) {
  //   const map = new Map();
  //   const roots = [];
  //   for(let i=0;i<arr.length;i++) {
  //     map.set(arr[i].id,{...arr[i],children: []})
  //   }
  //   for(let j=0;j<arr.length;j++) {
  //     const node = map.get(arr[j].id);
  //     const parentId = arr[j].pid
  //     if(arr[j].pid === null) {
  //       roots.push(node);
  //     }else {
  //       const parent = map.get(parentId);
  //       if(parent) {
  //         parent.children.push(node);
  //       }else {
  //         roots.push(node);
  //       }
  //     }
  //   }
  //   return roots;
  // }

  // console.log(arrToTreeFor(list)) 
</script>
